<template>
  <Page>
    <div slot="title">
      <div class="base-page-title" name="title">
        <top-hrader @back="$emit('back')" back="back" :className="className" :theme="theme">
          <template slot="name">
            <img class="title-img" :src="info.avatar">
            <span>{{info.name}}</span>
          </template>
          <template slot="right"><slot name="right"></slot></template>
        </top-hrader>
      </div>
    </div>
    <div class="inviter-wrap">
      <div class="inviter-title">
        <!-- <div class="person-name">{{info.group_name}}</div> -->
        <div class="person-act">邀请你成为<span class="c3">{{info.company_name}}</span>{{info.contact_ways}}</div>
      </div>
      <img class="inviter-img" src="~assets/img/inviter-bg.png">
      <div class="inviter-con">
        <form class="form-conent"  @keypress.enter="submit" onsubmit="return false">
            <div>
              <div class="form-item">
                <div class="form-label"><code>*</code>手机号码</div>
                <div class="form-input fx fx-vc">
                    <div class="fx fx-vc code fx-between" @click="changeAreaCode">
                      <span>+{{form.phone_area_code}}</span>
                      <i class="arrow"></i>
                    </div>
                  <Input type="tel" class="flex" v-model="form.account" placeholder="请输入手机号码"/>
                </div>
              </div>

              <div class="form-item">
                <div class="form-label"><code>*</code>短信验证码</div>
                <div class="fx fx-vc fx-between">
                  <div class="form-input fx fx-vc code-input">
                    <Input type="tel" class="flex" v-model="form.ver_code" placeholder="请输入验证码"/>
                  </div>
                  <a @click="getVerCode($event)" class="ver-code btn btn-primary btn-outline" :disabled='!form.account'>{{ver_time_text}}</a>
                </div>
              </div>
            </div>

            <a class="btn btn-block btn-primary submit" :disabled="!valid_form" @click="submit($event)">{{posting ? '提交中' : '提交申请'}}</a>
          </form>
      </div>
      <div class="footer"><img src="~assets/img/download_logo.png" alt=""> <p>乐马国际会</p></div>
    </div>
</Page>
</template>

<script>
import topHrader from '~/components/common/header.vue'
import Page from '~/components/page';
import Input from '~/components/Input'

export default {
  components: {
    topHrader,
    Input,
    Page,
  },
  async asyncData({store}) {
    await store.dispatch('register/setAreaCode');
  },
  data(){
    return {
      name:'李四邀请你成为',
      form: {
        phone_area_code: this.$store.getters['register/getPhoneAreaCode'],
        account:'',
        ver_code:'',
        is_send:false,
        loading:false,
        ver_time:60,
        by: 1,
        code: this.$utils.getUrlKey("code"),
      },
      info: {},
      posting:false,
    }
  },
  props: {
    back:{ // 如果为true ,则处触发back事件，具体处理逻辑再调用页面处理
      type:Boolean,
      default:false,
    },
    className: {
      default:1
    },
    theme: {
      default:''
    },
  },
  computed: {
    ver_time_text(){
      let item = this.form
      return !item.is_send ? (item.loading ? '加载中' : '获取验证码') : `${item.ver_time}s后重试`;
    },
    valid_form(){
      return !!String(this.form.account).trim() && this.form.is_send && !!String(this.form.ver_code).trim()
    }
  },
  mounted () {
    // 存储code,用于邀请人注册页页返回到邀请人首页
    this.$store.commit('invite/SET_CODE', this.$utils.getUrlKey("code"));

    this.getInviter();
  },
  methods: {
    async submit () {
      if(!this.valid_form) {
        if(!this.form.account) {
          this.$toast('请输入手机号码')
        } else if(!this.form.ver_code){
          this.$toast('请输入验证码')
        }
        return false;
      }
      let datas = {
        phone_area_code:''
      };
      let { data } = await this.$axios.post('?ct=member&ac=reg_is_exists', {
        phone_area_code:this.form.phone_area_code,
        phone:this.form.account,
        ver_code:this.form.ver_code,
        by:1,
        code:this.form.code,
      });

      // 已存在组织 + 申请成功
      if(data.code == 0) {
        this.$store.commit("SET_UID",data.uid);
        this.$store.commit("SET_TOKEN",data.token);
        let param = {
          token: data.data.token,
          uid: data.data.uid,
          pid: data.data.group_labels[0].uid,
          relation_status: data.data.relation_status
        }
        localStorage.setItem('invite', JSON.stringify(param))
        this.$router.push({name: 'invite-login', params: {form: param}});

      // 未注册过，跳到注册页
      } else if(data.code == -10100) {
        let param = {
          phone_area_code:this.form.phone_area_code,
          phone:this.form.account,
          ver_code:this.form.ver_code,
          by: 1,
          code: this.form.code,
        }

        localStorage.setItem('invite', JSON.stringify(param))
        this.$router.push({name: 'invite-register', params: {form: param}});

      // 提交信息错误
      }else {
        this.$toast(data.msg);
      }
    },
    // 获取邀请人信息
    async getInviter () {
      // 从地区选择回来
      let params = this.$route.params
      if(params.country) {
        this.form.phone_area_code = params.country.code
        this.form.code = params.data.code
        this.form.account = params.data.account
      }

      let { data } = await this.$axios.post('?ct=member&ac=invite_relation', {code: this.form.code});
      if(data.code == 0) {
        this.info = data.data;
      } else {
        // 显示错误信息
        this.$toast(data.msg);
      }
    },
    changeAreaCode(){ // 修改手机区号
      // 缓存表单数据
      let {
        account,
        phone_area_code,
        code,
      } = this.$data.form

      this.$router.push({name:'area_list',
        query:{
          from:'inverte'
        },
        params:{
          from:this.$route.name,
          data: {
            account,
            phone_area_code,
            code,
          }
        }
      });
    },
    async getVerCode(e) {
      // 获取验证码
      if(this.form.is_send) return false;

      //获取验证码成功后input要获取焦点
      //这里不能反正ajax之后执行，浏览器处理机制问题
      try{
        let $input = e.target.parentNode.querySelector('input');
        $input && $input.focus();
      }catch(e){console.error(e)}

      let { data } = await this.$axios.post('?ct=member&ac=send_ver_code',{
        account:`${this.form.phone_area_code}${this.form.account}`,
        action:'reg',
        type:1,
      });

      if(data.code == 0 ){
        this.form.is_send = true;
        this.form.ver_handel = setInterval(()=>{
          try {
            if(this.form.ver_time == 0) {
              clearInterval(this.form.ver_handel);
              this.form.ver_handel = null;
              this.form.ver_time = 60;
              this.form.is_send = false;
            }
            this.form.ver_time--;
          }catch(e){
            clearInterval(this.form.ver_handel);
            this.form.ver_time = 60;
            this.form.is_send = false;
            this.$error(e);
          }
        },1000);

      }else{
        this.$toast(data.msg);
      }
      this.form.loading = false;
    },
  }
}
</script>

<style lang="less" scoped>

.header {
  span{
    vertical-align: middle;
  }

  .title-img {
    margin-right: 19px;
    display: inline-block;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    border-radius: 50%;
  }
}


.inviter-wrap {
  background: #fff;

  .inviter-title {
    padding: 60px 0;
    line-height: 1;
    font-size: 30px;
    text-align: center;

    .person-act {
      margin-top: 24px;
    }
  }

  .inviter-img {
    display: block;
    margin: 0 auto;
    width: 700px;
  }

  .form-conent {
    margin: 74px 30px 0;

    .form-item {

      & + .form-item {
        margin-top:57px;
      }

      .form-label {
        margin-bottom: 18px;
        font-size:30px;
        color:#292929;
        white-space: nowrap;
        line-height: 1;

        code {
          color: #ff0000;
          font-size: 32px;
        }
      }

      .code {
        position: relative;
        width: 158px;
        font-size: 34px;

        &:after {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          display: block;
          content: '';
          width: 2px;
          height: 60px;
          background: #ccc;
        }
      }

      .ver-code {
        width: 188px;
        font-size: 30px;
      }

      .form-input {
        color: #333;
        height:88px;
        border-radius: 5px;
        border: 1px solid #ccc;
        padding: 0 20px;

        &.code-input {
          width: 483px;
          margin-right:20px;
        }

        /deep/ input {
          padding-left: 20px;
          display: block;
          -webkit-appearance: none;
          border:none;
          outline: none;
          height:40px;
          font-size:30px;
        }
      }
    }
  }

  .arrow {
    margin-right: 23px;
    display: block;
    border-bottom:1px solid #999;
    border-left: 1px solid #999;
    width:17px;
    height:17px;
    transform: rotate(-45deg)
  }

  .person-act {
    color: #666;
    .c3 {
      color: #333;
    }
  }

  .submit {
    margin-top: 92px;
  }
}
.footer {
  padding: 300px 0 60px;
  text-align: center;

  img {
    margin-right: 20px;
    display: inline-block;
    width: 44px;
    height: 44px;
    vertical-align: middle;
  }

  p{
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    color: #666;
  }
}
</style>
